<template>
  <div class="relative flex items-center">
    <div>
      <div :id="uuid" ref="chart" class="borderRadius-box"></div>
      <div class="text-center borderRadius-num">{{ v3 }}</div>
      <div class="borderRadius-name">
        {{ type == '1' ? translateTitle('Base.components.剩余物理机内存') : translateTitle('Base.components.JVM剩余内存') }}
      </div>
    </div>

    <div class="memory-box">
      <div class="flex justify-between mb-3 memory-box-item memory-box-item-1">
        <span class="flex items-center">
          <i></i>
          {{ type == '1' ? translateTitle('Base.components.物理机总内存') : translateTitle('Base.components.JVM总内存') }}
        </span>
        <span class="value">{{ v2 }}</span>
      </div>
      <div class="flex justify-between mb-3 memory-box-item memory-box-item-2">
        <span class="flex items-center">
          <i></i>
          {{ type == '1' ? translateTitle('Base.components.剩余物理机内存') : translateTitle('Base.components.JVM剩余内存') }}
        </span>
        <span class="value">{{ v3 }}</span>
      </div>
      <div class="flex justify-between mb-3 memory-box-item memory-box-item-3">
        <span class="flex items-center">
          <i></i>
          {{ type == '1' ? translateTitle('Base.components.物理机剩余SWAP区') : translateTitle('Base.components.JVM最大内存') }}
        </span>
        <span class="value">{{ v1 }}</span>
      </div>
    </div>
  </div>
</template>
<script>
  import { translateTitle } from '@/utils/i18n'
  import { defineComponent } from 'vue'
  import cloneDeep from 'lodash/cloneDeep'
  import * as echarts from 'echarts'
  export default defineComponent({
    name: 'BorderRadius',
    components: {},
    mixins: [],
    props: {
      type: {
        type: String,
        default: '1',
      },
      uuid: {
        type: String,
        default: '',
      },
      name: {
        type: String,
        default: '',
      },
      //剩余
      v1: {
        type: Number,
        default: 0,
      },
      //剩余
      v2: {
        type: Number,
        default: 0,
      },
      v3: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        myChart: null,
      }
    },
    watch: {
      progressNum: {
        handler() {
          this.initChart()
        },
      },
    },
    created() {},
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    methods: {
      translateTitle,
      initChart() {
        if (!this.myChart) {
          let chartDom = this.$refs.chart
          this.myChart = echarts.init(chartDom)
        }
        // let color = '#33cc66'
        // if (progressNum > 50) {
        //   color = '#FEA728'
        // }
        // if (progressNum > 80) {
        //   color = '#ff3333'
        // }
        let data = []
        if (this.type == '1') {
          data = [{ value: this.v2 }, { value: this.v3 }, { value: this.v1 }]
        } else {
          data = [{ value: this.v2 }, { value: this.v1 }, { value: this.v3 }]
        }
        let option = {
          tooltip: {
            trigger: 'item',
          },
          legend: {
            top: '5%',
            left: 'center',
          },
          series: [
            {
              name: translateTitle('Base.components.CPU使用率'),
              type: 'pie',
              radius: ['70%', '80%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 4,
                borderColor: '#fff',
                borderWidth: 1,
              },
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold',
                },
              },
              labelLine: {
                show: false,
              },
              data: data,
            },
          ],
        }

        option && this.myChart.setOption(cloneDeep(option), true)
      },
    },
  })
</script>
<style lang="scss">
  .borderRadius-box {
    height: 100px;
    width: 100px;
  }
  .borderRadius-num {
    position: relative;
    top: -58px;
    font-size: 16px;
    color: #fea728;
    font-weight: 700;
  }
  .borderRadius-name {
    font-size: 12px;
    text-align: center;
    position: relative;
    top: -20px;
  }
  .memory-box {
    font-size: 12px;
  }
  .memory-box-item {
    i {
      width: 6px;
      height: 6px;
      background-color: #999;
      display: inline-block;
      border-radius: 10px;
      margin-right: 4px;
    }
  }
  .memory-box-item-1 {
    i {
      background-color: #4e83ff;
    }
    .value {
      color: #4e83ff;
    }
  }
  .memory-box-item-2 {
    i {
      background-color: #fea728;
    }
    .value {
      color: #fea728;
    }
  }
  .memory-box-item-3 {
    i {
      background-color: #28c18f;
    }
    .value {
      color: #28c18f;
    }
  }
</style>
